<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

  <style>
    *{
      margin: 0;
      padding: 0;
    }
    
    ul{
      width: 800px;
      height: 500px;
      border: 1px solid #000;
      margin: 0 auto;
    }
    ul li{
      list-style: none;
      float:  left;
      width: 200px;
      height: 200px;
      margin: 30px 30px;
      border: 1px solid #000;

      text-align: center;
      line-height: 200px;
    }
    ul li:nth-child(1){
      background: url("./image/img.png") no-repeat;
    }
    ul li:nth-child(2){
      background: url("./image/img.png") no-repeat;
      /*
      第一个参数就是宽度  第二个参数是高度
      */
      background-size: 200px 100px;
    }

    ul li:nth-child(3){
      background: url("./image/img.png") no-repeat;

      background-size: 50% 50% ;
    }

    ul li:nth-child(4){
      background: url("./image/img.png") no-repeat;

      background-size: auto 200px ;
    }


    ul li:nth-child(5){
      background: url("./image/img.png") no-repeat;

      background-size: 100px auto ;
    }


    ul li:nth-child(6){
      background: url("./image/img.png") no-repeat;
      /*
  等比例拉伸  直到宽高都有

      */
      background-size: cover ;
    }



    ul li:nth-child(7){
      background: url("./image/img.png") no-repeat;

      /*
      宽或者高满足就停止拉伸
      */
      background-size: contain ;
    }
  </style>
</head>
<body>


<!--
什么是背景尺寸属性
是css3中新增的属性，专门用于设置背景图片大小的


-->

<ul>
  <li>默认</li>
  <li>具体像素</li>
  <li>百分比</li>
  <li>宽度等比拉伸</li>
  <li>高度等比拉伸</li>
  <li>cover</li>
  <li>contain</li>
</ul>

</body>
</html>